//1.导入vue 和 vuerouter 的包
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

//3.创建路由的实例对象
const router = new VueRouter({
    // 回到记忆滚动位置(App.vue不能设置height:100vh)
    scrollBehavior(to, from, savedPosition) {
        console.log(savedPosition, to.name)
        if (savedPosition) {
            return savedPosition
        } else {
            return {
                x: 0,
                y: 0
            }
        }
    },

    routes: [{
        path: '',
        redirect: '/index',
    }, {
        path: '/index',
        component: () => import('@/view/index.vue'),
        name: 'index',
        meta: { title: '首页', keep: true }
    }, {
        path: '/dragDialog',
        component: () => import('@/view/dragDialog.vue'),
        name: 'showDragDialog',
        meta: { title: '封装可拖拽el-dialog', keep: true }
    }, {
        path: '/cleave',
        component: () => import('@/view/cleave.vue'),
        name: 'cleave',
        meta: { title: '自定义v-cleave命令' }
    }, {
        path: '/textOverflow',
        component: () => import('@/view/textOverflow.vue'),
        name: 'textOverflow',
        meta: { title: '改造el-tooltip,使其支持文字溢出时再显示' }
    }, {
        path: '/directives',
        component: () => import('@/view/directives.vue'),
        name: 'directives',
        meta: { title: '学习使用v-directive' }
    }, {
        path: '/shakeAnimation',
        component: () => import('@/view/shakeAnimation.vue'),
        name: 'shakeAnimation',
        meta: { title: '好看的抖动动画' }
    }, {
        path: '/timePicker',
        component: () => import('@/view/timePicker.vue'),
        name: 'timePicker',
        meta: { title: 'timePicker时间/日期选择器', keep: true }
    }, {
        path: '/provideAndInject',
        component: () => import('@/view/provideAndInject.vue'),
        name: 'provideAndInject',
        meta: { title: 'vue2中的provide和inject' }
    }, {
        path: '/longPress',
        component: () => import('@/view/longPress.vue'),
        name: 'longPress',
        meta: { title: '自定义指令longPress' }
    }, {
        path: '/Compressor',
        component: () => import('@/view/Compressor.vue'),
        name: 'Compressor',
        meta: { title: 'Compressor:第三方图片有损压缩库' }
    }, {
        path: '/throwControl',
        component: () => import('@/view/throwControl.vue'),
        name: 'throwControl',
        meta: { title: '通过throw和try catch来控制程序流（分步注册小案例）' }
    }, {
        path: '/Bus',
        component: () => import('@/view/Bus.vue'),
        name: 'Bus',
        meta: { title: '发布者-订阅者模式，事件总线Bus' }
    }, {
        path: '/throttleBtn',
        component: () => import('@/view/throttleBtn.vue'),
        name: 'throttleBtn',
        meta: { title: '基于elementUI的节流按钮' }
    }, {
        path: '/learnElScrollbars',
        component: () => import('@/view/learnElScrollbars.vue'),
        name: 'learnElScrollbars',
        meta: { title: '学习使用elementUI中的el-scrollbar组件' }
    }, {
        path: '/modifyElTable',
        component: () => import('@/view/modifyElTable.vue'),
        name: 'modifyElTable',
        meta: { title: '为el-table集成el-scrollbar' }
    }, {
        path: '/dynamicImg',
        component: () => import('@/view/dynamicImg.vue'),
        name: 'dynamicImg',
        meta: { title: '支持动态变量的img组件' }
    }, {
        path: '/vScopedId',
        component: () => import('@/view/vScopedId.vue'),
        name: 'vScopedId',
        meta: { title: '使用自定义指令为各种与App同级的容器添加scopeId,以便样式能够精准命中' }
    }, {
        path: '/elClickoutside',
        component: () => import('@/view/elClickoutside.vue'),
        name: 'elClickoutside',
        meta: { title: 'el-table的隐藏指令，只有在点击绑定dom之外的dom时生效' }
    }, {
        path: '/vueEllipsis',
        component: () => import('@/view/vueEllipsis.vue'),
        name: 'vueEllipsis',
        meta: { title: '引用vueEllipsis' }
    }, {
        path: '/leafletMap',
        component: () => import('@/view/leafletMap/leafletMap.vue'),
        name: 'leafletMap',
        meta: { title: '利用leaflet.js实现手绘地图的渲染' }
    }, {
        path: '/imgUpload',
        component: () => import('@/view/imgUpload/imgUpload.vue'),
        name: 'imgUpload',
        meta: { title: '封装图片上传组件' }
    }, {
        path: '/singleCheckbox',
        component: () => import('@/view/singleCheckbox/singleCheckbox.vue'),
        name: 'singleCheckbox',
        meta: { title: '只能单选的checkbox组' }
    }, {
        path: '/colorPicker',
        component: () => import('@/view/colorPicker/colorPicker.vue'),
        name: 'colorPicker',
        meta: { title: '修改element颜色选择器的template,使其支持插槽' }
    },{
        path: '/useVModel',
        component: () => import('@/view/useVModel/useVModel.vue'),
        name: 'useVModel',
        meta: { title: '封装useVModel' }
    },{
        path: '/vueDriver',
        component: () => import('@/view/vueDriver/vueDriver.vue'),
        name: 'vueDriver',
        meta: { title: '封装Driver.js vue2版' }
    },{
        path: '/useMoney',
        component: () => import('@/view/useMoney/useMoney.vue'),
        name: 'useMoney',
        meta: { title: '封装currency.js，用以方便展示货币和货币直接的运算' }
    },{
        path: '/quarterSelector',
        component: () => import('@/view/quarterSelector/quarterSelector.vue'),
        name: 'quarterSelector',
        meta: { title: '封装季度选择器' }
    },]
})

//4.向外共享路由的实例对象
export default router
